<template>
  <div class="main-wk">
    <div class="tip">
      <el-collapse v-model="activeNames" @change="handleChange">
        <el-collapse-item :title="item.title" :name="i" v-for="(item,i) in dataObj">
          <div>{{ item.desc }}</div>
          <div class="sub-title">{{item.ip}}</div>
        </el-collapse-item>
      </el-collapse>
    </div>
    <!--    我是model1-->
    <Echart class="tip-chart" height="100%" width="80%" :options="options"/>
  </div>
</template>

<script>
import Echart from '@/components/Echart/index'
export default {
  name: 'model2',
  components:{
    Echart,
  },
  data(){
    return {
      activeNames:[0],
      dataObj:[
        {
          title:'10.11.168.12',
          desc:'发现未备案的设备访问核心应用服务器,该设备访问的核心应用服务器为:',
          ip:'关键服务器故障:10.11.178.12'
        },
      ],
      options: {
        title: {
          show:false,
          text: 'Basic Graph'
        },
        tooltip: {},
        animationDurationUpdate: 1500,
        animationEasingUpdate: 'quinticInOut',
        series: [
          {
            type: 'graph',
            right:'10%',
            zoom:0.6,
            layout: 'none',
            left:'center',
            symbolSize: 90,
            symbol:"image://" + require("@/assets/images/graphIcon.png"),
            roam: true,
            label: {
              show: true,
              color:'#4B6EEF',
              position:'bottom'
            },
            edgeSymbol: ['circle', 'arrow'],
            edgeSymbolSize: [4, 10],
            edgeLabel: {
              fontSize: 20
            },
            data: [
              {
                name: '10.11.168.12',
                x: 300,
                y: 300
              },
              {
                name: '未知-10.11.178.12',
                x: 0,
                y: 300
              }
            ],
            links: [
              {
                target: '10.11.168.12',
                source: '未知-10.11.178.12'
              },
            ],
            lineStyle: {
              opacity: 0.9,
              width: 1,
              curveness: 0
            }
          }
        ]
      }
    }
  },

  methods:{
    handleChange(val){
      console.log(val)
    }
  }
}
</script>

<style lang="scss" scoped>


</style>
